<template>
  <div class="finalshell-decrypt">
    <div class="page-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>FinalShell 密码解密</el-breadcrumb-item>
      </el-breadcrumb>
      <h2 class="page-title">FinalShell 密码解密</h2>
      <p class="page-description">解密 FinalShell 保存的加密密码</p>
    </div>

    <div class="decrypt-container">
      <el-card class="decrypt-card">
        <template #header>
          <div class="card-header">
            <el-icon><Key /></el-icon>
            <span class="card-title">密码解密</span>
          </div>
        </template>

        <div class="form-content">
          <div class="input-section">
            <label class="input-label">加密密码：</label>
            <el-input
              v-model="encryptedPassword"
              type="textarea"
              :rows="3"
              placeholder="请输入 FinalShell 的加密密码，例如：LQlbPF4tYmBwWVkMezyYZhQpl3BqVoQB"
              class="password-input"
            />
          </div>

          <div class="button-group">
            <el-button type="primary" size="large" @click="decryptPassword" :loading="isDecrypting">
              <el-icon><Unlock /></el-icon>
              解密密码
            </el-button>
            <el-button size="large" @click="clearAll" v-if="encryptedPassword || decryptedPassword">
              <el-icon><Delete /></el-icon>
              清除
            </el-button>
          </div>

          <div class="result-section" v-if="decryptedPassword">
            <label class="input-label">解密结果：</label>
            <div class="result-display">
              <el-input
                v-model="decryptedPassword"
                type="textarea"
                :rows="2"
                readonly
                class="result-input"
              />
              <el-button
                type="success"
                @click="copyResult"
                class="copy-button"
                :icon="CopyDocument"
              >
                复制结果
              </el-button>
            </div>
          </div>

          <div class="error-message" v-if="errorMessage">
            <el-alert :title="errorMessage" type="error" show-icon @close="errorMessage = ''" />
          </div>

          <div class="success-message" v-if="successMessage">
            <el-alert :title="successMessage" type="success" show-icon @close="successMessage = ''" />
          </div>
        </div>
      </el-card>

      <el-card class="help-card">
        <template #header>
          <div class="card-header">
            <el-icon><InfoFilled /></el-icon>
            <span class="card-title">使用说明</span>
          </div>
        </template>

        <div class="help-content">
          <h4>如何获取 FinalShell 加密密码？</h4>
          <ol>
            <li>打开 FinalShell 配置文件目录</li>
            <li>找到对应的连接配置文件（.json格式）</li>
            <li>复制其中的 password 字段值</li>
          </ol>

          <h4>配置文件位置：</h4>
          <ul>
            <li>Windows: %APPDATA%/finalshell/conn/</li>
            <li>Linux: ~/.finalshell/conn/</li>
            <li>macOS: ~/.finalshell/conn/</li>
          </ul>

          <h4>测试示例：</h4>
          <p><strong>加密密码：</strong> LQlbPF4tYmBwWVkMezyYZhQpl3BqVoQB</p>
          <p><strong>解密结果：</strong> Centerm123!@#</p>

          <div class="warning">
            <el-icon><Warning /></el-icon>
            <span>本工具仅供学习和合法用途使用，请勿用于任何违法活动。</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Key, Unlock, Delete, CopyDocument, InfoFilled, Warning } from '@element-plus/icons-vue'
import { decodePassCalibrated } from '../utils/finalshell-decrypt-accurate.js'

const encryptedPassword = ref('')
const decryptedPassword = ref('')
const isDecrypting = ref(false)
const errorMessage = ref('')
const successMessage = ref('')

const decryptPassword = async () => {
  if (!encryptedPassword.value.trim()) {
    errorMessage.value = '请输入加密密码'
    return
  }

  isDecrypting.value = true
  errorMessage.value = ''
  successMessage.value = ''

  try {
    const result = decodePassCalibrated(encryptedPassword.value.trim())

    if (result) {
      decryptedPassword.value = result
      successMessage.value = '密码解密成功！'
    } else {
      errorMessage.value = '解密失败，请检查输入的加密密码是否正确'
    }
  } catch (error) {
    console.error('解密错误:', error)
    errorMessage.value = '解密过程中发生错误，请检查输入格式'
  } finally {
    isDecrypting.value = false
  }
}

const clearAll = () => {
  encryptedPassword.value = ''
  decryptedPassword.value = ''
  errorMessage.value = ''
  successMessage.value = ''
}

const copyResult = async () => {
  if (!decryptedPassword.value) return

  try {
    await navigator.clipboard.writeText(decryptedPassword.value)
    ElMessage.success('复制成功！')
  } catch (error) {
    // 降级方案
    const textarea = document.createElement('textarea')
    textarea.value = decryptedPassword.value
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    ElMessage.success('复制成功！')
  }
}
</script>

<style scoped>
.finalshell-decrypt {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  color: #303133;
  margin: 16px 0 8px 0;
  font-weight: 600;
}

.page-description {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

.decrypt-container {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 24px;
  align-items: start;
}

.decrypt-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.form-content {
  padding: 20px 0;
}

.input-section {
  margin-bottom: 24px;
}

.input-label {
  display: block;
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
  font-weight: 500;
}

.password-input {
  width: 100%;
}

.button-group {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.result-section {
  margin-bottom: 24px;
}

.result-display {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.result-input {
  flex: 1;
}

.copy-button {
  white-space: nowrap;
}

.error-message,
.success-message {
  margin-bottom: 16px;
}

.help-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 20px;
}

.help-content h4 {
  font-size: 14px;
  color: #303133;
  margin: 16px 0 8px 0;
  font-weight: 600;
}

.help-content h4:first-child {
  margin-top: 0;
}

.help-content ol,
.help-content ul {
  margin: 8px 0;
  padding-left: 20px;
  color: #606266;
  font-size: 13px;
  line-height: 1.6;
}

.help-content p {
  margin: 8px 0;
  color: #606266;
  font-size: 13px;
  line-height: 1.6;
}

.warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background-color: #fdf6ec;
  border: 1px solid #f5dab1;
  border-radius: 4px;
  color: #e6a23c;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .decrypt-container {
    grid-template-columns: 1fr;
  }

  .help-card {
    position: static;
  }

  .result-display {
    flex-direction: column;
  }

  .copy-button {
    width: 100%;
  }

  .button-group {
    flex-direction: column;
  }
}
</style>